<template>
    <div>
        <Form
            ref="entityForm"
            class="page-sys-user-drawer-form"
            :model="entity"
            :rules="entityRules"
            :disabled="drawerType === 'read'"
            label-position="top"
            label-colon
            hide-required-mark
        >
            <Row :gutter="32">
                <Col span="12">
                    <FormItem prop="name" label="组织简称">
                        <Input v-model="entity.name" placeholder="请输入组织简称，必填" />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="fullName" label="组织全称">
                        <Input v-model="entity.fullName" placeholder="请输入组织全称，必填" />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="parentId" label="上级组织">
                        <Select v-model="entity.parentId">
                            <Option v-for="item in orgDataSource" :disabled="item.disabled" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="orgType" label="组织类型">
                        <Select v-model="entity.orgType">
                            <Option :value="1">机构</Option>
                            <Option :value="2">部门</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="managers" label="负责人">
                        <Input v-model="entity.managers" placeholder="请输入负责人" />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="tel" label="联系电话">
                        <Input v-model="entity.tel" placeholder="请输入联系电话" />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="status" label="状态">
                        <Select v-model="entity.status">
                            <Option :value="1">启用</Option>
                            <Option :value="0">停用</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="sort" label="排序值">
                        <Input v-model.number="entity.sort" type="number" placeholder="请输入数字" />
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem prop="remark" label="说明">
                        <Input v-model="entity.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入说明"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Divider />
        </Form>
        <div class="page-sys-user-drawer-footer" v-if="drawerType != 'read'">
            <Button type="primary" @click="handleSubmitEdit" :loading="submitting">提交</Button>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    import { SaveData ,GetData,OrgDataSource } from '@api/org';


    export default {
        name:'table-form',
        props:{
            "entityId":String,
            "drawerType":String
        },
        data () {
            return {
                submitting:false,
                entity:{
                    id:null,
                    name:'',
                    fullName:'',
                    parentId:'',
                    orgType:1,
                    managers:'',
                    tel:'',
                    sort:'0',
                    remark:'',
                    status:1
                },
                orgDataSource:[
                    {id:'',name:'',disabled:false}
                ],
                entityRules:{
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    fullName: [
                        { required: true, message: '请输入全称', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            initEntity(){
                GetData(this.entityId).then(res=>{
                    if(res.errcode!=0){
                        this.$Message.error(res.msg);
                        return;
                    } 
                    this.entity=res.data;
                });
            },
            handleSubmitEdit () {
                this.$refs.entityForm.validate(valid => {
                    if (valid) {
                        if (this.submitting) return;
                        this.submitting = true;

                        SaveData(this.entity).then(res => {
                            this.submitting = false;
                            if(res.errcode!=0){
                                this.$Message.error(res.msg);
                                return;
                            }                            
                            this.$emit('saveFinished');                            
                        }).catch(error=>{
                            this.submitting = false;
                        });
                    }
                });
            },
            disabledOrgDataSource(id){
                this.orgDataSource.forEach(element => {
                    if(element.parentId==id)
                    {
                        element.disabled=true;
                        this.disabledOrgDataSource(element.id);
                    }
                    else if(element.id==id){
                        element.disabled=true;
                    }
                });
            }
        },
        created(){
            OrgDataSource().then(res=>{
                if(res.errcode!=0){
                    this.$Message.errcode(res.msg);
                    return;
                }
                this.orgDataSource=res.data;
                //当前为编辑操作时，上级组织下拉列表中，不能选择当前组织的子级
                if(this.entityId){
                    this.disabledOrgDataSource(this.entityId);
                }
                console.log(this.orgDataSource);
            });
        },
        mounted(){
            if(this.entityId) this.initEntity();
        }
    }
</script>
